<template>
  <div class="components_list">
    <div v-for="(v,i) in comlist" :key="i">
      <div class="components_top">
        <!-- 头像 -->
        <div class="top_left">
          <div class="head_portrait">
            <img :src="v.user.avatar" alt />
          </div>
        </div>

        <!-- 用户名 -->
        <div class="top_right">
          <p>{{ v.user.uname }}</p>
          <p>{{ v.created | getTimestamp }}</p>
        </div>
      </div>
      <div class="components_middle">
        <p>{{ v.content }}</p>
      </div>
      <div class="components_bottom">
        <div v-for="(v,i) in v.images" :key="i">
          <img :src="v" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    comlist: {}
  },
  computed: {},
  filters: {
    getTimestamp: function(timestamp) {
      if (timestamp) {
        var date = new Date(timestamp * 1000); 
        var Y = date.getFullYear();
        var M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var s = date.getSeconds();
        return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.components_list {
  width: 100%;

  .components_top {
    width: 100%;
    height: 120px;

    display: flex;
    align-items: center;

    .top_left {
      width: 100px;
      height: 100px;

      .head_portrait {
        width: 100px;
        height: 100px;
        border-radius: 50px;

        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .top_right {
      p {
        margin-bottom: 0px;
        margin-left: 10px;
      }
    }
  }
  .components_middle {
    margin: 20px 0px;
    width: 100%;
    height: 80px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    p {
      word-wrap: break-word;
      text-indent: 2em;
    }
  }

  .components_bottom {
    width: 100%;
    // height:400px;
    display: flex;
    // justify-content: space-between;
    flex-flow: wrap;
    div {
      width: 150px;
      height: 150px;
      margin: 5px;
      //   border:1px solid red;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>